<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta type="author" content="Jason Chavannes" />
	<title>jQuery Timer Demo</title>
	
	<style type='text/css'>
	body {
		font-family: Arial;
		font-size: 12px;
	}
	label {
	 	display: inline-block;
	 	*display:inline;
	 	zoom:1;
		width: 30px;
	}
	input[type=button] {
		padding: 3px 10px;
		margin: 10px 0px 5px;
	}
	p {
		margin: 0px;
	}
	div {
	 	display: inline-block;
	 	*display:inline;
	 	zoom:1;
		width: 300px; 
	} 
	
	</style>
	
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.timer.js"></script>
</head> 
<body>

	<p>
		<pre>
var countOne = 0, countTwo = 0;
	
var params = {
	action : function() {
		countTwo++;
		$('.two').html(countTwo);				
	},
	time : 1500,
	autostart: true
};


var timerOne;
var timerTwo = $.timer();

timerOne = $.timer(function() {
	countOne++;
	$('.one').html(countOne);
}, 1000, true);

timerTwo.set(params);

		</pre>
	</p>

	<div>
		<p>Timer one has been executed <span class='one'>0</span> times.</p>
		
		<input type='button' value='timerOne.play()' onclick='timerOne.play();' /><br/>
		<input type='button' value='timerOne.pause()' onclick='timerOne.pause();' /><br/>
		<input type='button' value='timerOne.toggle()' onclick='timerOne.toggle();' /><br/>
		<input type='button' value='timerOne.once()' onclick='timerOne.once();' /><br/>
		<input type='button' value='timerOne.once(2000)' onclick='timerOne.once(2000);' /><br/>
		<input type='button' value='timerOne.reset()' onclick='timerOne.reset();' />
	</div>

	<div>
		<p>Timer two has been executed <span class='two'>0</span> times.</p>
		
		<input type='button' value='timerTwo.play()' onclick='timerTwo.play();' /><br/>
		<input type='button' value='timerTwo.pause()' onclick='timerTwo.pause();' /><br/>
		<input type='button' value='timerTwo.toggle()' onclick='timerTwo.toggle();' /><br/>
		<input type='button' value='timerTwo.once()' onclick='timerTwo.once();' /><br/>
		<input type='button' value='timerTwo.once(2000)' onclick='timerTwo.once(2000);' /><br/>
		<input type='button' value='timerTwo.reset()' onclick='timerTwo.reset();' />
	</div>
	
	<script type="text/javascript">
	
		var timerOne, params;	
		var countOne = 0, countTwo = 0, timerTwo = $.timer();
		$(document).ready(function() {
			
			timerOne = $.timer(function() {
				countOne++;
				$('.one').html(countOne);
			}, 1000, true);
			
			params = {
				action : function() {
					countTwo++;
					$('.two').html(countTwo);				
				},
				time : 1500,
				autostart: true
			};
			timerTwo.set(params);
			
		});
	
	</script>
	
</body>
</html>